<template>
  <div class="background">
    <div class="login-header"></div>
    <div class="login-body">
      <div class="login-body-header">
        <el-image
            style="width: 100%; height: 140px"
            :src="url"
            :fit="fit"
        ></el-image>
      </div>
      <div class="login-box">
        <h1>登录</h1>
        <el-form
            class="rule-form"
            name="ruleForm"
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
        >
          <div class="rule-from-input-items">
            <el-form-item class="rule-form-input-item" prop="username">
              <div class="rule-form-input-div">
                <el-input
                    class="input-item"
                    placeholder="请输入账号"
                    v-model="ruleForm.username"
                    autocomplete="off"
                ></el-input>
              </div>
            </el-form-item>
          </div>

          <div class="rule-from-input-items">
            <el-form-item class="rule-form-input-item" prop="password">
              <div class="rule-form-input-div">
                <el-input
                    class="input-item"
                    type="password"
                    placeholder="请输入密码"
                    v-model="ruleForm.password"
                    autocomplete="off"
                ></el-input>
              </div>
            </el-form-item>
          </div>

          <el-button
              class="btn"
              type="primary"
              @click="submitForm('ruleForm')"
              v-loading.fullscreen.lock="fullscreenLoading"
          >
            <span v-if="loginSpan">登录</span>
            <span v-else>登录中...</span>
          </el-button>

          <el-form-item>
            <router-link class="register" :to="{ name: 'sign' }"
            >去注册
            </router-link
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import '@/styles/css/background/index-bg.css'
import {login} from "@/apis/common";

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    return {
      fullscreenLoading: false,
      fit: "cover",
      url: "https://www.ulearning.cn/sld/img/login_banner.84eac1a1.png",
      ruleForm: {
        username: '',
        password: '',
      },
      loginSpan: true,
      rules: {
        username: [
          {required: true, message: "用户名不能为空", trigger: "blur"},
        ],
        password: [
          {validator: validatePass, trigger: "blur"},
          {
            min: 5,
            max: 8,
            message: "长度在 5 到 8 个任意字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {

    this.init()
  },

  methods: {
    //页面初始化
    init() {

      // 将登录页面按钮效果恢复
      this.loginSpan = true
    },

    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.loginSpan = false
          login(this.ruleForm).then((resp) => {
            if (resp?.data?.code == 1) {
              let type = resp?.data?.data?.type
              // 在浏览器中保存用户信息
              localStorage.setItem("token", resp?.data?.data?.token)
              localStorage.setItem("id", resp?.data?.data?.id)
              localStorage.setItem("type", resp?.data?.data?.type)
              localStorage.setItem("name", resp?.data?.data?.name)
              // 设置时间函数
              setTimeout(async () => {
                this.$message.success("登录成功,欢迎你" + resp?.data?.data?.name)
                // 判断用户状态
                if (resp?.data?.data?.status == 0) {
                  this.$message.info("账号状态异常，请联系管理员！")
                }

                // 页面跳转，正常跳转至登录页面
                if (resp?.data?.data?.status == 1) {
                  if (type == 'student') {
                    this.$router.push({
                      name: 'studentIndex'
                    }).catch(r => {
                      console.log(r)
                    })
                  } else if (type == 'teacher') {
                    this.$router.push({
                      name: 'teacherIndex'
                    }).catch(r => {
                      console.log(r)
                    })
                  } else if (type == 'amdin') {
                    this.$router.push({
                      name: 'adminIndex'
                    }).catch(r => {
                      console.log(r)
                    })
                  } else {
                    this.$message.error("登录出现错误，请稍后重试")
                  }
                }
                // 页面跳转，账号状态为信息未填写，跳转至个人信息页面
                if (resp?.data?.data?.status == 2) {
                  this.$router.push({
                    name: 'infoIndex'
                  }).catch(r => {
                    console.log(r)
                  })
                }

              }, 1000)

            } else {
              this.$message.error(resp?.data?.msg)
              this.loginSpan = true
            }
          })
          return true;
        } else {
          this.$message.error("登录失败，请稍后重试!")
          this.loginSpan = true
          return false;
        }
      });
    },

  },
};
</script>

<style scoped>


.login-box {
  width: 800px;
  margin: -90px auto;
  padding: 48px;
  border-radius: 4px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  background-color: rgb(255, 255, 255);
  position: relative;
}


.login-header {
  z-index: 1;
  display: block;
  background-color: #ffff;
  height: 50px;
}

.login-body-header {
  display: block;
}

.rule-form {
  width: 420px;
  margin: 0 auto;
  display: block;
}

.rule-form-input-item {
  margin-bottom: 22px;
}

.rule-form-input-div {
  line-height: 44px;
  display: inline-block;
  font-size: 14px;
  position: relative;
  width: 100%;
}

.input-item {
  height: 44px;
  line-height: 44px;
  background-image: none;
  border-radius: 4px;
  box-sizing: border-box;
  display: inline-block;
  outline: 0;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}


button,
select {
  text-transform: none;
}

.btn {
  margin-top: 18px;
  width: 100%;
  padding: 14px 20px;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  color: #fff;
  background-color: #ea5947;
  border-color: #ea5947;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  transition: 0.1s;
  font-weight: 400;
  font-size: 14px;
  border-radius: 4px;
  min-width: 88px;
}

span {
  color: #fff;
  line-height: 1;
  font-size: 14px;
}

.register {
  color: #444;
  background-color: transparent;
  text-decoration: none;
}
</style>